<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fm" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/style.css" />
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/shopping-mall-index.css" />
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/zhonglin.js"></script>
</head>

<script type="text/javascript">

    function checkUserName(){
        var userName = $("#userName").val();
        var user = {"username":userName};
        $.ajax({
            type:'post',
            url:'${pageContext.request.contextPath}/user/checkUserName.action',
            data:JSON.stringify(user),
            dataType : 'json',
            contentType:'application/json;charset=utf-8',
            success:function (data1) {
                if(data1.username != ""){
                    document.getElementById("readerNameTip").innerHTML = "<font color='red'>× 该用户名已经被注册，请重新输入</font>";
                    $("#submit").attr("disabled",true);
                }
            }
        });
    }

    function clearUserName(){
        document.getElementById("readerNameTip").innerHTML = "";
        $("#submit").attr("disabled",false);
    }


</script>

<body>

<!--top 开始-->
<div class="top">
    <div class="top-con w1200">
        <p class="t-con-l f-l">您好，欢迎来到宅客微购</p>
        <ul class="t-con-r f-r">
            <li><a href="#">我 (个人中心)</a></li>
            <li><a href="#">我的购物车</a></li>
            <li><a href="#">我的订单</a></li>
            <li class="erweima">
                <a href="#">扫描二维码</a>
                <div class="ewm-tu">
                    <a href="#"><img src="<%=request.getContextPath()%>/images/erweima-tu.jpg" /></a>
                </div>
            </li>
            <div style="clear:both;"></div>
        </ul>
        <div style="clear:both;"></div>
    </div>
</div>

<!--logo search 开始-->
<div class="hd-info1 w1200">
    <div class="logo f-l">
        <h1><a href="#" title="中林网站"><img src="<%=request.getContextPath()%>/images/logo.jpg" /></a></h1>
    </div>
    <div class="search f-r">
        <ul class="sp">
            <li class="current" ss-search="sp"><a href="JavaScript:;">商品</a></li>
            <li ss-search="dp"><a href="JavaScript:;">店铺</a></li>
            <div style="clear:both;"></div>
        </ul>
        <div class="srh">
            <div class="ipt f-l">
                <input type="text" placeholder="搜索商品..." ss-search-show="sp" />
                <input type="text" placeholder="搜索店铺..." ss-search-show="dp" style="display:none;" />
            </div>
            <button class="f-r">搜 索</button>
            <div style="clear:both;"></div>
        </div>
        <ul class="sp2">
            <li><a href="#">绿豆</a></li>
            <li><a href="#">大米</a></li>
            <li><a href="#">驱蚊</a></li>
            <li><a href="#">洗面奶</a></li>
            <li><a href="#">格力空调</a></li>
            <li><a href="#">洗发护发</a></li>
            <li><a href="#">葡萄 </a></li>
            <li><a href="#">脉动</a></li>
            <li><a href="#">海鲜水产</a></li>
            <div style="clear:both;"></div>
        </ul>
    </div>
    <div style="clear:both;"></div>
</div>

<form action="${pageContext.request.contextPath}/user/insertUser.action" method="post">
<!--内容开始-->
    <div class="password-con registered">
        <div class="psw">
            <p class="psw-p1">用户名</p>
            <input type="text" placeholder="请输入用户名" name="username" value="${user.username}" id="userName" onfocus="clearUserName()" onblur="checkUserName()"/>
            <span id="readerNameTip"></span>
        </div>
        <div class="psw">
            <p class="psw-p1">输入密码</p>
            <input type="text" placeholder="请输入密码" name="password" value="${user.password}"/>
            <span class="cuo">密码由6-16的字母、数字、符号组成</span>
        </div>
        <div class="psw">
            <p class="psw-p1">确认密码</p>
            <input type="text" placeholder="请再次确认密码" />
            <span class="cuo">密码不一致，请重新输入</span>
        </div>
        <div class="psw psw2">
            <p class="psw-p1">手机号</p>
            <input type="text" placeholder="请输入手机号" name="phone" value="${user.phone}"/>
        </div>
        <div class="psw psw3">
            <p class="psw-p1">验证码</p>
            <input type="text" placeholder="请输入验证码" />
        </div>
        <div class="yanzhentu">
            <div class="yz-tu f-l">
                <img src="<%=request.getContextPath()%>/images/psw-yanzhengtu.gif" />
            </div>
            <p class="f-l">看不清？<a href="#">换张图</a></p>
            <div style="clear:both;"></div>
        </div>
        <div class="agreement">
            <input type="checkbox" name="hobby"></input>
            <p>我有阅读并同意<span>《宅客微购网站服务协议》</span></p>
        </div>
        <button class="psw-btn" id="submit">立即注册</button>
        <p class="sign-in">已有账号？请<a href="#">登录</a></p>
    </div>
</form>

<!--底部服务-->
<%@include file="../foot.jsp"%>

</body>
</html>
